 <template>
      <div class="qrcode">
         <div class="qrcode_content" :id="name"></div>
      </div>
    </template>
    <script>
    import QRcode from 'qrcodejs2';
    let qrcode = '';
    export default {
      name: 'qrcode',
      data() { 
        return {
    
        }
      },
      computed:{
            name:{
                get(){
                    let sid = 'qrcode';
                    if(this.sid){
                        sid = this.sid;
                    }
                    return sid;
                },
                set(value){
                    this.name = value;
                }
            },
            value:{
                get(){
                    let value = '空空如也';
                    if(this.text){
                        value = this.text;
                    }
                    return value;
                },
                set(value){
                    this.value = value;
                }
            },            
      },
      props:{
            sid:{
                type:String
            },
            text:{
                default:null
            },
            swidth:{
                type:Number
            },
            sheight:{
                type:Number
            },
      },
      watch: {
			text(val) {				
				document.getElementById(this.name).innerHTML = "";
				this.qrcode();
			}
	  },
      methods:{
            qrcode() { 
             	qrcode = new QRcode(this.name, {  
	                width: 80,  
	                height: 80, 
	                text: this.value, // 二维码内容
	                image: '',
	                correctLevel : QRcode.CorrectLevel.L  
	                //容错级别，可设置为：(低到高)
	                // QRCode.CorrectLevel.L
	                // QRCode.CorrectLevel.M
	                // QRCode.CorrectLevel.Q
	                // QRCode.CorrectLevel.H 
	                
	                // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
	                // background: '#f0f'  
	                // foreground: '#ff0'  
	            })                 
            }
      },
      destroyed(){
            // qrcode.clear();
            qrcode = null;
      },
      mounted(){
//    	console.log(this.swidth)   
//    	console.log(this.sheight)
//    	console.log(this.text)      	
        this.qrcode();
      }
     }
    </script>
    <style scoped>
        .qrcode {
		  padding-top: 0.21333333rem;
		  padding-bottom: 0.21333333rem;
		}
		.qrcode .qrcode_content {
		  display: flex;
		  justify-content: center;
		}
    </style>